<template>
	<view>
		<!-- 滚动栏 -->
		<view class="uni-tab-bar">
			<scroll-view scroll-x  class="uni-swiper-tab" scroll-with-animation :scroll-left="scrollLeft">
				<block v-for="(tab,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)" :id="'top'+ index">
						{{tab}}
					</view>
				</block>
			</scroll-view>
		</view>
		<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change='tabChange'>
			<swiper-item  key='0'>
				<scroll-view scroll-y class="scrollView">
					<block v-for="(item,index) in userLandList" :key="index">
						<land-list @deleteLand="delLand" :collect="true" @Editor='landEditor' :userLandList="item"></land-list>
					</block>
				</scroll-view>
			</swiper-item>
			<swiper-item  key='1'>
				<scroll-view scroll-y class="scrollView">
					<block v-for="(item,index) in sellLandList" :key="index">
						<land-list :sell="true" :userLandList="item"></land-list>
					</block>
				</scroll-view>
			</swiper-item>
			<swiper-item  key='2'>
				<scroll-view scroll-y class="scrollView">
					<block v-for="(item,index) in DealtLandList" :key="index">
						<land-list @dealtPush='dealtPush' :dealt="true" :userLandList="item"></land-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import landList from "../../../components/landList/landList.vue"
	// function getLocalTime(nS) {  
	//  return new Date(parseInt('2020-02-22 12:00:00') * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
	// }
	// console.log(getLocalTime());
	export default {
		components:{
			landList
		},
		data() {
			return {
				sellLandList:{},
				DealtLandList:{},
				userLandList:{},
				scrollLeft: 0,
				tabBars: ["已采集","已发布","已交易"], //滚动栏选项
				tabIndex: 0,
				nextTabList:["x","s","c"],
				swiperHeight: 0,
			}
		},
		
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"addLand"
			})
		},
		created() {
			//获取屏幕可使用高度
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(100)
				}
			});
		},
		onLoad() {
			
		},
		onReady() {
			this.getUserLand()
			this.getSellLand()
			this.getDealtLand()
		},
		methods: {
			//重新上架土地
			async dealtPush(id){
				let res = await this.$http({
					url:'/app/transaction/doTransactionOnTheShelf',
					data:{
						id:id
					}
				})
				if(res.data.code==200){
					uni.showToast({
						title:res.data.msg
					})
				}
			},
			//获取已经交易的土地
			async getDealtLand(){
				let res = await this.$http({
					url:'/app/transaction/searchAllTransaction',
					data:{
						pages:1
					}
				})
				// console.log(res)
				this.DealtLandList = res.data.data;
			},
			//获取已经发布的土地
			async getSellLand(){
				let res = await this.$http({
					url:'/app/person/searchAllCollection',
					data:{
						limit:5,
						page:1
					}
				})
				// console.log(res)
				this.sellLandList = res.data.data.data
			},
			//删除已采集的土地
			async delLand(id){
				// console.log(id)
				let res = await this.$http({
					url:'/app/person/deleteCollectionLand',
					data:{
						id:id
					}
				})
				// console.log(res)
				if(res.data.code==200){
					uni.showToast({
						title:res.data.msg
					})
				}
			},
			//获取已采集的土地
			async getUserLand(){
				let res = await this.$http({
					url:'/app/person/selectAllCollection',
					data:{
						pages:1
					}
				})
				this.userLandList=res.data.data;
				// console.log(res)
			},
			//编辑事件触发
			landEditor(){
				uni.navigateTo({
					url:"./landEditor"
				})
			},
			// 顶部选项卡选中
			tabtap(e) {
				this.tabIndex = e;
				// this.scrollLeft = (e - 1) * 60
			},
			//滑动监听事件
			tabChange(e) {
				
				this.tabIndex = e.detail.current;
				// this.scrollLeft = (e.detail.current - 1) * 60;
				
			}
		}
	}
</script>

<style lang="less">
	@import  "../../../common/global.less";
	
	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 0% !important;
	}
	/* 选项下方区域 */
	.scrollView {
		/* background-color: #007AFF; */
		/* width: 98%;
		margin: auto; */
		height: 100%;
	}
.uni-swiper-tab {
	width: 100%;
	white-space: nowrap;
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
	border-bottom: 1px solid #c8c7cc;
	
}
.swiper-tab-list {
	font-size: 30rpx;
	width: 150rpx;
	display: inline-block;
	text-align: center;
	color: #555;
}

</style>
